<template>
  <div class="haibei-home">
    <div class="home-left fl">
      <div class="bg-blue-dark tc">
        <img src="/static/images/indexlogo.png" v-if="!isCollapse" alt="" style=" vertical-align: middle">
        <span class="white fs16 bold" v-else>&nbsp;海贝</span>
      </div>
      <div class="content" :style="{height:left_height+'px'}">
        <imenu-item :menu-list="menuList" :is-collapse="isCollapse" :collect-list="collectList"></imenu-item>
      </div>
    </div>
    <div class="home-right fr" :style="{width:width+'px'}">
      <div class="flex flex-between flex-item-center bg-top-476f9a">
        <div class="white pointer">
          <i class="p10 el-icon-menu" @click="isCollapseBtn"></i>
        </div>
        <div class="header-right-bar tr pr20">
          <el-dropdown size="mini">
            <span class="el-dropdown-link white pointer">
              {{users.name}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button type="text" style="width:100%;" plain size="mini" @click="passwordFormVisible=true">修改密码</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button type="text" style="width:100%;" plain size="mini" @click="bankFormVisible=true">收款账户</el-button>
              </el-dropdown-item>

              <el-dropdown-item>
                <el-button type="text" style="width:100%;" plain size="mini" @click="loginOut">退出</el-button>
              </el-dropdown-item>

            </el-dropdown-menu>
          </el-dropdown>

        </div>
      </div>
      <div class="home-content mt20 pl20 pr20">
        <div class="bg-white p15 mb20 home-breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-if="getNavItem.parent">{{getNavItem.parent}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{getNavItem.name}}</el-breadcrumb-item>
          </el-breadcrumb>

        </div>
        <div style="height:3px;"></div>
        <div :style="{height: height+'px','overflow': 'auto'}">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </div>
      </div>
    </div>
    <div class="clearfix"></div>

    <el-dialog title="修改密码" :visible.sync="passwordFormVisible" width="500px">
      <el-form :model="ruleFormPwd" size="mini" ref="ruleFormPwd" label-width="100px" :rules="rules">
        <el-form-item label="原始密码" prop="oldPassword">
          <el-input v-model="ruleFormPwd.oldPassword" type="password" placeholder="请输入原始密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input v-model="ruleFormPwd.pass" type="password" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="ruleFormPwd.checkPass" type="password" placeholder="请确认密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelPassword('ruleFormPwd')">取 消</el-button>
        <el-button type="primary" @click="submitPassword('ruleFormPwd')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="绑定银行卡" :visible.sync="bankFormVisible" width="500px">
      <el-form :model="bankFormPwd" size="mini" ref="bankFormPwd" label-width="100px" :rules="rulesBank">
        <el-form-item label="银行名称" prop="bank_name">
          <el-input v-model="bankFormPwd.bank_name" type="text" placeholder="请输入银行名称"></el-input>
        </el-form-item>
        <el-form-item label="收款人" prop="account_name">
          <el-input v-model="bankFormPwd.account_name" type="text" placeholder="请输入收款人"></el-input>
        </el-form-item>
        <el-form-item label="收款账号" prop="account_num">
          <el-input v-model="bankFormPwd.account_num" type="text" placeholder="请输入收款账号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelBank('bankFormPwd')">取 消</el-button>
        <el-button type="primary" @click="submitBank('bankFormPwd')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import utils from "@/assets/utils";
import service from "@/service/index";
import imenuItem from "@/components/Common/MenuItem";
import { getCookie, delCookie } from "@/assets/utils";
import { mapGetters } from "vuex";
import menuList from '@/assets/menu';
export default {
  name: "home",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleFormPwd.checkPass !== "") {
          this.$refs.ruleFormPwd.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleFormPwd.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      height: 0,
      menuList: [],
      collectList: [],
      width: 0,
      passwordFormVisible: false,
      bankFormVisible: false,
      ruleFormPwd: {
        oldPassword: "",
        pass: "",
        checkPass: ""
      },
      bankFormPwd: {
        id: '',
        bank_name: '',
        account_name: '',
        account_num: ''
      },
      isCollapse: false,
      leftWidth: 256,
      users: {},
      rules: {
        oldPassword: [{ required: true, min: 6, max: 20, message: '密码长度为6到20', trigger: "blur" }],
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPass: [{ required: true, validator: validatePass2, trigger: "blur" }]
      },
      rulesBank: {
        bank_name: [{ required: true, message: '不能为空', trigger: "blur" }],
        account_name: [{ required: true, message: '不能为空', trigger: "blur" }],
        account_num: [{ required: true, message: '不能为空', trigger: "blur" }]
      },
      left_height: 0
    };
  },
  computed: {
    ...mapGetters(["getNavItem"])
  },
  mounted() {
    this.setHeight();
    window.onresize = () => {
      this.setHeight();
    };
    this.getMenuItemData();
    this.users = getCookie("userInfo") || { name: 'charsle' };


    this.getHaiheiQueryBankInfoServer();
    this.getHaiheiQuerySysMessageServer();
    setInterval(() => {
      this.getHaiheiQuerySysMessageServer();
    }, 60000)



  },
  methods: {
    async getHaiheiQuerySysMessageServer() {
      let res = await service.haiheiQuerySysMessageServer();
      if (res.success) {

        for (let item of res.result)

          this.$notify({
            title: item.message_title,
            message: item.message_content,
            position: 'bottom-right',
            duration: 0
          });
      }
    },
    //查询银行信息
    async getHaiheiQueryBankInfoServer() {
      let res = await service.haiheiQueryBankInfoServer();
      if (res.success) {
        this.bankFormPwd = Object.assign({}, res.result)
      }
    },


    submitBank(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let params = Object.assign({}, this.bankFormPwd)
          let res = await service.haiheiUpdateBankInfoServer(params);
          if (res.success) {
            this.bankFormVisible = false;
            this.getHaiheiQueryBankInfoServer();
            this.$refs[formName].resetFields();
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        }
      })
    },
    cancelBank(formName) {
      this.$refs[formName].resetFields();
      this.bankFormVisible = false;
    },
    submitPassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.changePasswordFun(formName);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    cancelPassword(formName) {
      this.$refs[formName].resetFields();
      this.passwordFormVisible = false;
    },
    async changePasswordFun(formName) {
      let res = await service.haiBeiServerChangePassword({
        password: this.ruleFormPwd.oldPassword,
        newpassword: this.ruleFormPwd.pass
      });
      if (res.success) {
        this.$message({
          type: 'success',
          message: '修改成功,下次登录之前生效'
        })
        this.passwordFormVisible = false;
        this.$refs[formName].resetFields();
      } else {
        this.$message({
          type: 'error',
          message: res.msg
        })
      }
    },
    async getMenuItemData() {
      ;
      let userType = getCookie('31cb7911514b27_type')

      let list = menuList['marster' + userType]



      this.menuList = list;
      this.$store.dispatch("setAllMenu", list);
      this.$nextTick(() => {
        $(".content").mCustomScrollbar({
          mouseWheelPixels: 100,
          scrollInertia: 10,
        });
      })
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: "获取失败"
      //     });
      //   }
    },

    setHeight() {
      let content_width = document.querySelectorAll('.haibei-home')[0].clientWidth;
      let win_height =
        document.documentElement.clientHeight || document.body.clientHeight;
      let win_width =
        document.documentElement.clientWidth || document.body.clientWidth;
      this.height = win_height - 120;
      this.left_height = win_height - 62;
      if (content_width != 1300) {
        if (this.isCollapse) {
          this.width = win_width - 64;
        } else {
          this.width = win_width - 256;
        }
      } else {
        this.width = 1000
      }
    },
    isCollapseBtn() {
      if (this.isCollapse) {
        this.width = this.width - 192
      } else {
        this.width = this.width + 192
      }
      this.isCollapse = !this.isCollapse;
    },
    loginOut() {
      this.$confirm("您确定退出系统吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        lockScroll: false
      })
        .then(() => {
          service.haiBeiServerLoginOut().then(res => {
            if (res.state) {
              const loading = this.$loading({
                lock: true,
                text: "退出系统中,请稍等...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
              });
              delCookie('userInfo');
              delCookie('agentCode');
              delCookie('navName')
              setTimeout(() => {
                loading.close();
                this.$router.push({
                  name: "login"
                });

              }, 1000);
            }
          });
        })
        .catch(() => { });
    }
  },
  components: {
    imenuItem
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  overflow: auto;
  position: relative;
  background: #001529;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.home-content {
  position: relative;
  overflow: hidden;
}
.home-breadcrumb {
  box-shadow: 1px 1px 3px #ccc;
}
.el-menu {
  border-right: 0;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 256px;
}

.home {
  height: 100vh;
  width: 100%;
  background: #fff;
}

.haibei-home {
  width: 100%;
  min-width: 1300px;
}
.haibei-home:after {
  content: "";
  clear: both;
  display: block;
}

.home-comtent {
  background: #f1f1f1;
  margin: 10px auto;
}

.home-left {
  box-shadow: 0px 2px 10px #000;
  overflow: hidden;
  /* width:256px; */
}

.home-right {
  min-width: 1030px;
  background: #f0f2f5;
}

.bg-blue-dark {
  background: #394263;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #22283d;
}

.header-right-bar {
  height: 60px;
  line-height: 60px;
  padding: 0 12px 0 0;
  /* background: #fff; */
  -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  -moz-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.breadcrumb-nav {
  margin-top: 6px;
  background: #fff;
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
